<template>
  <simple-select :data-list="statusOptions" v-model="selectKey" :style="{width: '100%'}" v-on="$listeners" v-bind="$attrs" :option="{name:'name',value:'value'}" @change="setColor" ref="simple-select">
    <template slot-scope="{data}" v-if="type=='circle-text'">
      <div class="option">
      <span class="circle" :style="{'background': data.color}" v-if="data.color"></span>{{data.name}}
      </div>
    </template>
  </simple-select>
</template>
<script>
  import SimpleSelect from '../Common/SimpleSelect'
  export default {
    name: 'DictSelect',
    components: { SimpleSelect },
    props: {
      value: {
        type: [Number, String, Boolean,Array],
        default: undefined
      },
      distKey: {
        type: String,
        default: ''
      },
      type:{
        type:String,
        default:"text"
      },
    },
    data() {
      return {
        statusOptions: []
      }
    },
    created() {
      this.getDicts(this.distKey).then(res => {
        this.statusOptions = res.data
        if(this.selectKey){
          this.setColor(this.selectKey)
        }
      })
    },
    computed: {
      selectKey: {
        get() {
          return this.value
        },
        set(v) {
          this.$emit('input', v)
        }
      }
    },
    methods: {
      setColor(val) {
        let currItem = {}
        this.statusOptions.map(item=>{
          if(val == item.value){
            currItem = item
          }
        })
        if(currItem.color){
          this.$refs["simple-select"].$el.children[0].children[0].style.color =currItem.color
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
.option{
  display: flex;
  align-items: center;
  .circle{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
  }
}
</style>
